<template>
  <div class="shengmu1 base-background-img">
    <div class="b" @click="playFun(b)">
        <img src="~@/assets/youxiaoxianjie/shengmu/1/b.png">
    </div>
    <div class="p" @click="playFun(p)">
        <img src="~@/assets/youxiaoxianjie/shengmu/1/p.png">
    </div>
    <div class="m" @click="playFun(m)">
        <img src="~@/assets/youxiaoxianjie/shengmu/1/m.png">
    </div>
    <div class="f" @click="playFun(f)">
        <img src="~@/assets/youxiaoxianjie/shengmu/1/f.png">
    </div>
    <c-pdf @closePdf="closePdf" v-if="isshowpdf" :info="info" :infourl="pdfurl"></c-pdf>
  </div>
</template>

<script>
  export default {
    name: 'shengmu1',
    data () {
      return {
        isshowpdf: false,
        infourl: '',
        info: '',
        b: {
          url: 'static/youxiao/pdf/shengmu/b.pdf',
          data: []
        },
        p: {
          url: 'static/youxiao/pdf/shengmu/p.pdf',
          data: []
        },
        m: {
          url: 'static/youxiao/pdf/shengmu/m.pdf',
          data: []
        },
        f: {
          url: 'static/youxiao/pdf/shengmu/f.pdf',
          data: []
        }
      }
    },
    methods: {
      playFun: function (item) {
        console.log(item)
        this.isshowpdf = true
        this.pdfurl = item.url
        this.info = item.data
      },
      closePdf: function () {
        this.isshowpdf = false
      }
    }
  }
</script>

<style scoped>
.shengmu1 {
  background: url(~@/assets/youxiaoxianjie/shengmu/1/bg.png);
}
.shengmu1 > div {
  position: absolute; 
}
.b {
  top: 282px;
  left: 240px;
}
.p {
  top: 268px;
  left: 478px;
}
.m {
  top: 280px;
  left: 675px;
}
.f {
  top: 295px;
  left: 893px;
}
</style>
